<template>
  <n-modal
    v-model:show="getProps.modalData.show"
    class="custom-card p-pre-trial-dialog"
    preset="card"
    :style="{ width: '800px' }"
    title=""
    :bordered="false"
    :mask-closable="false"
  >
    <template #header>
      <n-tabs v-if="tabs[0]" v-model:value="activeTab" type="card">
        <n-tab-pane v-for="(item, index) in mediaUrlList" :key="item" :name="index" :tab="`${item.name}`" />
      </n-tabs>
    </template>
    <n-carousel
      direction="horizontal"
      :show-arrow="true"
      dot-type="line"
      dot-placement="bottom"
      style="min-height: 240px"
    >
      <div v-for="(item, index) in mediaUrlList[activeTab].urlList" :key="index">
        <div v-if="item.type === 2" style="text-align: center; max-height: 300px">
          <video :src="item.url" :controls="true" objectFit="fill" style="max-height: 300px" />
        </div>
        <div v-else style="text-align: center; max-height: 300px">
          <n-image
            :src="item.url"
            :previewed-img-props="{ style: {} }"
            fallback-src="https://alicdn.itaored.com/test/feima-uploaded/images/a8/1f/a81f32e133c829e8e3cdfe1784f8a4ad.png?x-oss-process=image/resize,w_150/quality,q_94/format,webp"
            object-fit="contain"
          />
        </div>
      </div>
    </n-carousel>
    <n-scrollbar x-scrollable>
      <div
        v-for="(item, index) in mediaUrlList[activeTab].text"
        :key="index"
        style="margin-top: 10px; white-space: nowrap"
      >
        文案{{ index + 1 }}:{{ item }}
      </div>
    </n-scrollbar>
  </n-modal>
</template>
<script setup lang="ts">
  import { computed, onMounted, reactive, ref } from 'vue'
  import { XButton, XIcon } from '@/components'
  import { NModal, NCarousel, NScrollbar, NTabs, NTabPane, NImage } from 'naive-ui'
  import { useStore } from '@/store'
  const emits = defineEmits(['success'])

  const store = useStore()
  const props = defineProps({
    modalData: {
      type: Object,
      default: () => ({})
    }
  })
  const getProps = reactive(props)
  const mediaUrlList = getProps.modalData.currow.mediaUrlList
  const activeTab = ref(0)
  const tabs = ref(['11', '22', '33', '4', '5555', '6', '77777'])

  console.log(getProps.modalData, 1111, mediaUrlList)
</script>
<style>
  .n-carousel .n-carousel__arrow {
    background: rgba(31, 45, 61, 0.11);
    color: #fff;
  }
  .n-carousel .n-carousel__arrow:hover {
    background-color: red;
  }
</style>
<style scoped lang="scss"></style>
